<template>
  <div class="stat-card" :class="{ 'stat-card--hover': hover }">
    <div class="stat-card__number">{{ value }}</div>
    <div class="stat-card__title">{{ title }}</div>
    <div class="stat-card__change" :class="trend">
      {{ change }}
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  title: string
  value: string
  change: string
  trend: 'up' | 'down'
  hover?: boolean
}

withDefaults(defineProps<Props>(), {
  hover: true
})
</script>

<style scoped>
.stat-card {
  background: rgba(10, 25, 41, 0.4);
  border: 1px solid rgba(74, 144, 226, 0.2);
  border-radius: 6px;
  padding: 12px 8px;
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-card--hover:hover {
  transform: translateY(-2px);
  background: rgba(10, 25, 41, 0.6);
  border-color: rgba(74, 144, 226, 0.4);
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
}

.stat-card__number {
  font-size: 20px;
  font-weight: bold;
  color: #4a90e2;
  margin-bottom: 4px;
}

.stat-card__title {
  font-size: 11px;
  color: #b0c4de;
  margin-bottom: 4px;
}

.stat-card__change {
  font-size: 10px;
  font-weight: 500;
}

.stat-card__change.up {
  color: #5cb85c;
}

.stat-card__change.down {
  color: #d9534f;
}
</style>